<template>
  <div class="app-container home">

    <el-row :gutter="10">

      <el-col :span="16">
        <div class="box">
          <ModuleHeader :title="'首发媒体溯源'"/>
          <div class="box_div" style="padding: 0">
            <el-table :data="startingMedia">
              <el-table-column label="媒体类型" align="center" prop="carrie" width="100"/>
              <el-table-column label="发布时间" align="center" prop="publishTime" width="160"/>
              <el-table-column label="标题" width="500">
                <template slot-scope="scope">
                  <el-link
                    style="color: #1f86d9;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: inline-block;width: 100%; ">
                    {{ scope.row.title }}
                  </el-link>
                </template>
              </el-table-column>
              <el-table-column label="信息来源" align="center">
                <template slot-scope="scope">
                  <el-link :href="scope.row.url" target="_blank">
                    {{ scope.row.siteName }}
                  </el-link>
                </template>
              </el-table-column>

            </el-table>
          </div>
        </div>

      </el-col>

      <el-col :span="8">
        <div class="box">
          <ModuleHeader :title="'国内舆情'"/>
          <div class="box_div" >
            <map-china-chart :height="height"
                             :optionTitleText="''"
                             :max="maxOpinionCountChina"
                             :data="chinaOpinions"

            />
          </div>
        </div>

      </el-col>

    </el-row>



      <el-row :gutter="10">
        <el-col :span="16">
          <div class="box">
            <ModuleHeader :title="optionTitleTextCount"/>
            <div class="box_div" >
              <line-chart :height="height"
                          :optionSeries="optionSeriesCount"
                          :optionXAxisData="optionXAxisDataCount"
                          :optionTitleText="''"
                          :optionLegend="optionLegendCount"
              />
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="box">
            <ModuleHeader :title="optionTitleTextPerson"/>
            <div class="box_div" >
              <pie-chart :height="height"
                         :optionSeries="optionSeriesPerson"
                         :optionLegend="optionLegendPerson"
                         :optionTitleText="''"
              />
            </div>
          </div>

        </el-col>
      </el-row>




      <el-row :gutter="10">
        <el-col :span="16">
          <div class="box">
            <ModuleHeader :title="optionTitleTextLocation"/>
            <div class="box_div" >
              <bar-chart :height="height"
                         :optionSeries="optionSeriesLocation"
                         :optionXAxisData="optionXAxisDataLocation"
                         :optionTitleText="''"
              />
            </div>
          </div>

        </el-col>
        <el-col :span="8">
          <div class="box">
            <ModuleHeader :title="optionTitleTextOrganization"/>
            <div class="box_div" >
              <pie-chart :height="height"
                         :optionSeries="optionSeriesOrganization"
                         :optionLegend="optionLegendOrganization"
                         :optionTitleText="''"
              />
            </div>
          </div>

        </el-col>
      </el-row>




      <el-row :gutter="10">
        <el-col :span="12">
          <div class="box">
            <ModuleHeader :title="'信息载体趋势图'"/>
            <div class="box_div" >
              <line-chart :height="height"
                          :optionSeries="optionSeriesMediaType"
                          :optionXAxisData="optionXAxisDataMediaType"
                          :optionTitleText="''"
                          :optionLegend="optionLegendMediaType"
              />
            </div>
          </div>

        </el-col>
        <el-col :span="12">
          <div class="box">
            <ModuleHeader :title="'正负面信息趋势图'"/>
            <div class="box_div" >
              <line-chart :height="height"
                          :optionLegend="optionLegendSentiments"
                          :optionSeries="optionSeriesSentiments"
                          :color="sentimentsColor"
                          :optionXAxisData="optionXAxisDataSentiments"
                          :optionTitleText="''"/>
            </div>
          </div>
        </el-col>
      </el-row>




      <el-row :gutter="10">
        <el-col :span="8">
          <div class="box">
            <ModuleHeader :title="'舆情分析漏斗'"/>
            <div class="box_div" >
              <div style="height:391px;background-color: white " id="mainFunnel"></div>
            </div>
          </div>

        </el-col>
        <el-col :span="16">
          <div class="box">
            <ModuleHeader :title="'热词云图'"/>
            <div class="box_div" >
              <word-cloud :hots="hotWords" :height="'391px'" :optionTitleText="''"/>
            </div>
          </div>

        </el-col>

      </el-row>



  </div>
</template>

<script>
  import {
    getSentimentByPublishTimeByEventId,
    getMediaTypeByPublishTimeByEventId,
    getFirstMediaReleasedByEventId,
    getKeywordsByEventId,
    getPublicOpinionCountGroupByProvinceOfEventId,
    getPublicOpinionCountGroupByDayOfEventId,
    getPersonsByEventId,
    getLocationsByEventId,
    getOrganizationsByEventId,
    getAllInformation
  } from "@/api/system/event";
  import {
    funnelData,
    barData,
    radarData,
    customData,
    customDataItem
  } from "@/data/opinion/data-charts"
  import WordCloud from '@/components/Echarts/WordCloud'
  import PieChart from '@/components/Echarts/PieChart'
  import BarChart from '@/components/Echarts/BarChart'
  import Sunburst from '@/components/Echarts/Sunburst'
  import LineChart from '@/components/Echarts/LineChart'
  import MapChinaChart from '@/components/Echarts/MapChinaChart'
  import ModuleHeader from '@/views/components/ModuleHeader'
  const echarts = require('echarts')
  require('../../components/Echarts/spider') // echarts theme
  export default {
    name: 'Home',
    components: {
      WordCloud,
      PieChart,
      BarChart,
      Sunburst,
      LineChart,
      MapChinaChart,
      ModuleHeader
    },
    data() {
      return {


        maxOpinionCountChina: 0,
        chinaOpinions: [],
        optionSeriesCount: [],
        optionXAxisDataCount: [],
        optionLegendCount: [],
        optionTitleTextCount: '',

        optionLegendSentiments: ["正面", "中性", "负面"],
        optionSeriesSentiments: [],
        optionXAxisDataSentiments: [],
        sentimentsColor: [
          "green",
          "gray",
          "red"
        ],

        optionSeriesMediaType: [],
        optionXAxisDataMediaType: [],
        optionLegendMediaType: [],
        optionTitleTextMediaType: '',

        height: "459px",

        optionSeriesPerson: [],
        optionLegendPerson: [],
        optionTitleTextPerson: '',

        optionSeriesLocation: [],
        optionXAxisDataLocation: [],
        optionTitleTextLocation: '',
        selectEventId: 0,
        optionSeriesOrganization: [],
        optionLegendOrganization: [],
        optionTitleTextOrganization: '',


        hotWords: [{name: "暂无数据", value: 1}],

        beginPublishDay: null,
        endPublishDay: null,


        // 遮罩层
        loading: true,
        times: '',


        barData: barData,
        funnelData: funnelData,
        radarData: radarData,
        customData: customData,
        customDataItem: customDataItem,
        dateList: [],
        mediaTypeList: [],
        startingMedia: [],
        startingMediaAll: []
      }
    },
    methods: {
      getPersonsByEventId() {
        getPersonsByEventId({
          eventId: this.selectEventId,
        }).then(response => {
          this.optionTitleTextPerson = "关联人物分析"
          this.optionSeriesData = response.rows;
          let valuesPerson = []
          this.optionLegendPerson = [];
          this.optionSeriesPerson = [];

          this.optionSeriesData.forEach(item => {
            // this.optionLegendPerson.push(item.name);
            valuesPerson.push(item.value)
          })
          let seriePie = {
            name: "舆情数量",
            type: 'pie',
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            roseType: 'radius',
            radius: [50, 150],
            center: ['50%', '50%'],
            data: this.optionSeriesData,
            animationEasing: 'cubicInOut',
            animationDuration: 2600
          }
          this.optionSeriesPerson.push(seriePie);

        });
      },
      getLocationsByEventId() {
        getLocationsByEventId({
          eventId: this.selectEventId,
        }).then(response => {
          this.optionTitleTextLocation = "关联地域分析"
          this.optionSeriesData = response.rows;
          let valuesLocation = []
          this.optionXAxisDataLocation = [];
          this.optionSeriesLocation = [];
          this.optionSeriesData.forEach(item => {
            this.optionXAxisDataLocation.push(item.name);
            valuesLocation.push(item.value)
          })
          let serieLocation = {
            name: "舆情数量",
            barMaxWidth: 50,//最大宽度
            type: 'bar',
            stack: 'vistors',
            barWidth: '60%',
            data: valuesLocation,
            animationDuration: 6000
          }
          this.optionSeriesLocation.push(serieLocation);

        });
      },
      getOrganizationsByEventId() {
        getOrganizationsByEventId({
          eventId: this.selectEventId,
        }).then(response => {
          this.optionTitleTextOrganization = "关联机构分析"
          this.optionSeriesData = response.rows;
          let valuesOrganization = []
          this.optionLegendOrganization = [];
          this.optionSeriesOrganization = [];
          this.optionSeriesData.forEach(item => {
            // this.optionLegendOrganization.push(item.name);
            valuesOrganization.push(item.value)
          })
          let serieOrganization = {
            name: "舆情数量",
            type: 'pie',
            radius: ['40%', '70%'],
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            data: this.optionSeriesData,
            animationEasing: 'cubicInOut',
            animationDuration: 2600
          }
          this.optionSeriesOrganization.push(serieOrganization);

        });
      },


      getPublicOpinionCountGroupByDayOfEventId() {
        getPublicOpinionCountGroupByDayOfEventId({
          eventId: this.selectEventId,
        }).then(response => {

          let opinionCount = response.data
          this.optionTitleTextCount = "事件演化趋势分析"
          this.optionLegendCount = ["舆情数量"]
          this.optionXAxisDataCount = []
          this.optionSeriesCount = [];

          let data = []
          opinionCount.forEach(item => {
            this.optionXAxisDataCount.push(item.name)
            data.push(item.value)
          })
          let serie = {
            name: "舆情",
            type: 'line',
            stack: "数量",
            data: data,
            smooth: true
          }
          this.optionSeriesCount.push(serie)

        });
      },
      getPublicOpinionCountGroupByProvinceOfEventId() {
        getPublicOpinionCountGroupByProvinceOfEventId({
          eventId: this.selectEventId,
        }).then(response => {
          //国内舆情
          let mapDatas = response.data
          this.maxOpinionCountChina = 0
          mapDatas.forEach((item) => {
            this.maxOpinionCountChina = item.value > this.maxOpinionCountChina ? item.value : this.maxOpinionCountChina
            let str = item.name;
            if (str.includes("省")) {
              str = str.replace("省", "");
            }
            let obj = {
              name: str,
              value: item.value,
            }
            this.chinaOpinions.push(obj)
          })
        });
      },
      getKeywordsByEventId() {
        getKeywordsByEventId({
          eventId: this.selectEventId,
        }).then(response => {
          if (response.rows != undefined && response.rows.length > 0) {
            this.hotWords = response.rows;
          } else {
            this.hotWords = [{name: "暂无数据", value: 1}];
          }
          console.log(this.hotWords)
        });
      },
      getFirstMediaReleasedByEventId() {
        getFirstMediaReleasedByEventId({
          eventId: this.selectEventId,
        }).then(response => {
          let arrays = response.rows
          arrays.forEach(item => {
            if (this.startingMedia.length < 6) {
              this.startingMedia.push(item)
            }
            this.startingMediaAll.push(item)
          })
        });
      },
      getMediaTypeByPublishTimeByEventId() {
        getMediaTypeByPublishTimeByEventId({
          eventId: this.selectEventId,
        }).then(response => {
          //信息载体趋势图
          this.optionSeriesMediaType = []
          this.optionXAxisDataMediaType = []
          this.optionLegendMediaType = []
          let list = response.rows
          var xAxisData = [];
          var legendData = [];
          var seriesData = [];

// 获取legendData
          for (var i = 0; i < list.length; i++) {
            var row = list[i];
            // 添加日期到xAxisData数组
            xAxisData.push(row.name);
            // 获取legendData
            for (var j = 0; j < row.value.length; j++) {
              var value = row.value[j];
              // 添加value.name到legendData数组
              if (!legendData.includes(value.name)) {
                legendData.push(value.name);
              }
            }
          }

          // 遍历list数组
          for (var i = 0; i < list.length; i++) {
            var row = list[i];
            for (let k = 0; k < legendData.length; k++) {
              //获取媒体类型
              let mediaName=legendData[k];

              // 查找对应的series对象
              var getMediaName = row.value.find(function (obj) {
                return obj.name === mediaName;
              });

              if (!getMediaName) {
                let obj={
                  name:mediaName,
                  value:0
                }
                row.value.push(obj)
              }
            }

            // 遍历row.value数组
            for (let j = 0; j < row.value.length; j++) {
              let value = row.value[j];

              // 查找对应的series对象
              let seriesObj = seriesData.find(function (obj) {
                return obj.name === value.name;
              });

              // 如果找不到对应的series对象，则创建一个新的series对象
              if (!seriesObj) {
                seriesObj = {
                  name: value.name,
                  type: 'line',
                  data: []
                };
                seriesData.push(seriesObj);
              }
              // 添加value.value到seriesObj的data数组中
              seriesObj.data.push(value.value);
            }


          }

// 创建series数组
          var series = [];
          for (var i = 0; i < seriesData.length; i++) {
            var data = seriesData[i];

            // 创建series对象
            var seriesObj = {
              name: data.name,
              type: 'line',
              // stack: 'Total',
              data: data.data
            };

            // 将seriesObj添加到series数组中
            series.push(seriesObj);
          }

          console.log("媒体：",xAxisData);
          console.log("媒体：",legendData);
          console.log("媒体：",series);

          this.optionSeriesMediaType = series
          this.optionXAxisDataMediaType = xAxisData
          this.optionLegendMediaType = legendData

        });
      },
      getSentimentByPublishTimeByEventId() {
        getSentimentByPublishTimeByEventId({
          eventId: this.selectEventId,
        }).then(response => {
          this.optionSeriesSentiments = []
          this.optionXAxisDataSentiments = []
          let list = response.rows
          let zm = {
            name: '正面',
            type: 'line',
            data: [],

          }
          let zx = {
            name: '中性',
            type: 'line',
            data: [],

          }
          let fm = {
            name: '负面',
            type: 'line',
            data: [],

          }
          let zmlist = []
          let zxlist = []
          let fmlist = []
          list.forEach(item => {
            this.optionXAxisDataSentiments.push(item.name);
            let zmnum = 0
            let zxnum = 0
            let fmnum = 0
            item.value.forEach(i => {
              if (i.name == 'ispositive') {
                zmnum = i.value
              }
              if (i.name == 'isneutral') {
                zxnum = i.value
              }
              if (i.name == 'isnegative') {
                fmnum = i.value
              }
            })
            zmlist.push(zmnum)
            zxlist.push(zxnum)
            fmlist.push(fmnum)
          })
          zm.data = zmlist
          zx.data = zxlist
          fm.data = fmlist
          this.optionSeriesSentiments.push(zm)
          this.optionSeriesSentiments.push(zx)
          this.optionSeriesSentiments.push(fm)

        });
      },
      seeMore() {
        localStorage.setItem('startingMediaAll', JSON.stringify(this.startingMediaAll))
        this.$router.push({path: '/opinion/startingMedia'});
      },


      getAllInformation() {
        getAllInformation({
          eventId: this.selectEventId,
        }).then(response => {
          this.funnelData.series[0].data[0].value = response.data.allNum
          this.funnelData.series[0].data[1].value = response.data.relatedInformation
          this.funnelData.series[0].data[2].value = response.data.negative
          let funnelChart = echarts.init(document.getElementById('mainFunnel'), 'spider')
          funnelChart.setOption(this.funnelData)
        })
      },


      drawHeatChart() {

        this.getSentimentByPublishTimeByEventId()
        this.getMediaTypeByPublishTimeByEventId()
        this.getFirstMediaReleasedByEventId()
        this.getKeywordsByEventId()
        this.getPublicOpinionCountGroupByProvinceOfEventId()
        this.getPublicOpinionCountGroupByDayOfEventId()
        this.getPersonsByEventId()
        this.getLocationsByEventId()
        this.getOrganizationsByEventId()
        this.getAllInformation()

      }
    },
    created() {
      this.selectEventId = this.$route.query.eventId
      this.drawHeatChart();
    },
    mounted() {

    }


  }
</script>


<style lang="scss" scoped>
  .home {
    background-color: #eeeeee;
  }

  .box{
    background-color: white;
    margin-bottom: 10px;
  }

  .box_div {
    height: 380px;
    padding: 20px;
    font-size: 14px;
    display: flex;
    flex-direction: column;
  }

</style>




